<template>
<!--  聚合多组计算所有图的显示组件-->
  <div class="detailed_conclusions">
    <div class="totaltitle totaltitle1">
      <div class="blue-rectangle"></div>
      <h1>详细结论</h1>
    </div>
    <div class="conclusioncontent">
      <div class="titled1">
        <span style="font-weight: bold"
        >输出结果1：图10溶解液出口处铀浓度变化</span
        >
      </div>

      <div class="map-bt flex flex-column">
        <!--              <RandomSequenceChart ></RandomSequenceChart>-->
        <G10_Ur_generation :Argument="Argument" :Legend="Legend" :caculateResult="Ur_generation"></G10_Ur_generation>
        <button @click="getExcelFile(0)" >导出Excel</button>

      </div>
      <div class="">
        <span style="font-weight: bold">图表说明</span>
      </div>
      <div class="stepscontent">
        <div>
          <div>
            1、该图代表在单一模型中铀浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中铀浓度，单位为g/L。
          </div>
          <div>
            2、溶液中铀浓度初始为0 g/L，随着反应的进行，溶液中铀浓度逐渐增大。
          </div>
        </div>
      </div>
    </div>
    <div class="conclusioncontent">
      <div class="titled1">
        <span style="font-weight: bold"
        >输出结果2：图11溶解液出口处硝酸浓度变化</span
        >
      </div>

      <div class="map-bt flex flex-column">

        <G11_Nitric :Argument="Argument" :Legend="Legend" :caculateResult="Nitric_acid_concentration"></G11_Nitric>
        <button @click="getExcelFile(1)" >导出Excel</button>

      </div>
      <div class="">
        <span style="font-weight: bold">图表说明</span>
      </div>
      <div class="stepscontent">
        <div>
          <div>
            1、该图代表在单一模型中硝酸浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中硝酸浓度，单位为mol/L。
          </div>
          <div>2、随着反应的进行，溶液中硝酸浓度逐渐减小。</div>
        </div>
      </div>
    </div>
    <div class="conclusioncontent">
      <div class="titled1">
        <span style="font-weight: bold"
        >输出结果3：图12溶解过程氮氧化物生成速率变化</span
        >
      </div>
      <div class="map-bt flex flex-column">

        <G12_NOx_generation
            :Argument="Argument" :Legend="Legend"
            :caculateResult="NOx_generation"
        ></G12_NOx_generation>
        <button @click="getExcelFile(2)" >导出Excel</button>

      </div>
      <div class="">
        <span style="font-weight: bold">图表说明</span>
      </div>
      <div class="stepscontent">
        <div>
          <div>
            1、该图代表在单一模型中氮氧化物生成速率随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中氮氧化物生成速率，单位为mol/min。
          </div>
          <div>
            2、在该溶解反应中，每3mol硝酸与1mol二氧化铀反应，可以生成0.5mol的一氧化氮和0.5mol的二氧化氮，生成的氮氧化物就是一氧化氮和二氧化氮。
          </div>
          <div>
            3、反应开始阶段，由于容器中硝酸浓度处于最高值，反应速率最快，随着反应的进行，反应速率逐渐减小。
          </div>
          <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
        </div>
      </div>
    </div>
    <div class="conclusioncontent">
      <div class="titled1">
        <span style="font-weight: bold"
        >输出结果4：图14-1不同温度下铀浓度变化</span
        >
      </div>


      <div class="map-bt flex flex-column">

        <G142diffTempUranium :Argument="Argument" :Legend="Legend" :caculateResult="diffTempUranium"/>
        <button @click="getExcelFile(3)" >导出Excel</button>
      </div>
      <div class="">
        <span style="font-weight: bold">图表说明</span>
      </div>
      <div class="stepscontent">
        <div>
          <div>
            1、该图代表在单一模型中不同温度下铀浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中铀浓度，单位为g/L。
          </div>
          <div>
            2、不同温度下溶解反应的速率不同。温度越高，反应速率越快，溶液中铀浓度增加速率越大；温度越低，反应速率越慢，溶液中铀浓度增加速率越小。
          </div>
        </div>
      </div>
    </div>
    <div class="conclusioncontent">
      <div class="titled1">
        <span style="font-weight: bold"
        >输出结果5：图14-2不同温度下硝酸浓度变化</span
        >
      </div>
      <div class="map-bt flex flex-column">

        <!--              <RandomSequenceChart ></RandomSequenceChart>-->
        <G14_1diffTempAcid :Argument="Argument" :Legend="Legend" :caculateResult="diffTempAcid"/>
        <button @click="getExcelFile(4)" >导出Excel</button>

      </div>

      <div class="">
        <span style="font-weight: bold">图表说明</span>
      </div>
      <div class="stepscontent">
        <div>
          <div>
            1、该图代表在单一模型中不同温度下硝酸浓度随时间变化的曲线，图像横坐标是时间，单位为min;纵坐标为溶解器中硝酸浓度，单位为mol/L。
          </div>
          <div>
            2、不同温度下溶解反应的速率不同。温度越高，反应速率越快，溶液中硝酸消耗速率越大；温度越低，反应速率越慢，溶液中硝酸消耗速率越小。
          </div>
          <!--                <div>●季节性数据:季节性成分在时间，方向和幅度方面表现出重复的趋势。比如说每年夏季、冬季用电会比春季秋季多。</div>-->
          <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
        </div>
      </div>

    </div>

    <div class="conclusioncontent" v-if="UrTo_standardTime.length>0">
      <div class="titled1">
              <span style="font-weight: bold"
              >输出结果6：图15不同温度下铀浓度达到标准所需时间</span
              >
      </div>

      <div class="map-bt flex flex-column">
        <G16UrToResolve
            :Argument="Argument" :Legend="Legend" :caculateResult="UrTo_standardTime"
            :variable ="variable"
        ></G16UrToResolve>
        <button @click="getExcelFile(5)" >导出Excel</button>

      </div>

      <div class="">
        <span style="font-weight: bold">图表说明</span>
      </div>
      <div class="stepscontent">
        <div>
          <div>
            <div>
              1、该图代表在回转模型中不同温度下铀浓度达到标准所需要的时间。图像横坐标温度;纵坐标为在该温度下铀浓度达到标准所需时间，单位为min。
            </div>
            <div>
              2、不同温度下，溶解反应的速率不同，铀浓度达到标准所需要的时间也不同。在该回转模型中，要想达到出料要求，溶液中铀浓度应该在250到300
              g/L之间。
            </div>

          </div>
        </div>
      </div>
    </div>


    <div class="functionbutton" v-if="showExport">
      <!--        <el-button style="" type="" @click="goBack">返回</el-button>-->
      <!--        <el-button style="" type="" >保存</el-button>-->
      <!--        <el-button style="" @click="useParam">使用</el-button>-->
      <el-button @click="exportJson" style=""><a>导出</a></el-button>
    </div>
  </div>
</template>

<script>
import G10_Ur_generation from "@/views/caculate_detail/G10_Ur_generation";
import G11_Nitric from "@/views/caculate_detail/G11_Nitric";
import G12_NOx_generation from "@/views/caculate_detail/G12_NOx_generation";
import G14_1diffTempAcid from "@/views/caculate_detail/G14-1diffTempAcid";
import G142diffTempUranium from "@/views/caculate_detail/G14-2diffTempUranium";
import G16UrToResolve from "@/views/caculate_detail/G16-UrTo-Resolve";
import { dayjs } from "element-plus";


export default {
  name: "Caculate_Groups",

  props: {
    variable:{
      type:String,
    },
    params:{
      type:Object,
      default: function () {
        return {};
      },
    },
    showExport:{
      type:Boolean,
      default:true
    },
    baseUrl: {
      type: String,
    },
    ObjectId: {
      type: String,
    },
    IsSave: {
      type: String,
      default: "Yes"
    },
    Argument: {
      type: String,
      default: ""
    },
    Legend: {
      type: Array,
      default: function () {
        return [];
      },
    },
    Ur_generation: {
      type: Array,
      default: function () {
        return [];
      },
    },
    NOx_generation: {
      type: Array,
      default: function () {
        return [];
      },
    },
    Nitric_acid_concentration: {
      type: Array,
      default: function () {
        return [];
      },
    },
    diffTempAcid: {
      type: Array,
      default: function () {
        return [];
      },
    },
    diffTempUranium: {
      type: Array,
      default: function () {
        return [];
      },
    },
    UrTo_standardTime: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },

  data() {
    return {
      username: "",
    }
  },
  methods: {
    async getExcelFile(index){
      switch (index){
        case 0:
          this.requestExcel = "Ur_generation"
          break;
        case 1:
          this.requestExcel= "Nitric_acid_concentration"
          break;
        case 2:
          this.requestExcel= "NOx_generation"
          break;
        case 3:
          this.requestExcel= "diffTempUranium"
          break;
        case 4:
          this.requestExcel= "diffTempAcid"
          break;
        case 5:
          this.requestExcel = "UrTo_standardTime"
          break;

      }
      // console.log('[this.params]',JSON.stringify([this.params]))
      const formData = new FormData();
      formData.append("id", this.ObjectId);
      formData.append("username", this.username);
      formData.append('table_name',this.requestExcel)
      formData.append('params',JSON.stringify([this.params]))
      // console.log("[[[[[[[[[[[[[[[[[[[[[[[[[[[")
      // console.log(this.params)
      formData.append('variable',this.variable)

      var formDataToJson = {};
      formData.forEach((value, key) => {
        formDataToJson[key] = value;
      });
      var form2 = JSON.stringify(formDataToJson);
      console.log("下载Excel 上传JSON提交的表单");
      console.log(form2);

      const baseUrl = this.baseUrl;
      // console.log(baseUrl);
      await fetch("" + baseUrl + "/download/exportExcel", {
        method: "POST",
        body: formData,
      })
          .then((response) => response.blob())
          .then((blob) => {
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = this.requestExcel+dayjs().format("YYYYMMDDHHmmss")+ ".xlsx"
            link.click();
          })
          .catch((error) => {
            console.error("文件下载失败:", error);
          });



    },

    async exportJson() {
      if (this.IsSave !== "Yes") {
        this.$message.error("计算结果文件未选择保存，不可导出");
        return;
      }
      // console.log("获取id:\n");
      // console.log(this.ObjectId);
      const formData = new FormData();
      formData.append("id", this.ObjectId);
      formData.append("username", this.username);
      const baseUrl = this.baseUrl;
      // console.log(baseUrl);
      await fetch("" + baseUrl + "/cal/getJsonFile", {
        method: "POST",
        body: formData,
      })
          .then((response) => response.blob())
          .then((blob) => {
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download =
                this.ObjectId + "/" + dayjs().format("YYYY-MM-DD-HH:mm:ss") +
                ".json";
            link.click();
          })
          .catch((error) => {
            console.error("文件下载失败:", error);
          });
    },

  },
  mounted() {
    // console.log("CG_this.Legend)",this.Legend);
    this.username = localStorage.getItem('username') || ""
    // console.log("this.username", this.username);
    // console.log("this.ObjectId", this.ObjectId);
  },
  components: {
    G16UrToResolve,
    G142diffTempUranium,
    G14_1diffTempAcid,
    G12_NOx_generation,
    G11_Nitric,
    G10_Ur_generation,
  },
};
</script>

<style lang="scss" scoped>

.functionbutton {
  //margin-top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 50px;
  height: 100px;

  button {
    display: flex;
    border-radius: 4px;
    width: 80px;
    height: 30px;
    border: 1.2px solid #409eff;
  }
}

.detailed_conclusions {
  .conclusioncontent:not(:nth-of-type(2)) {
    .titled1 {
      margin-top: 80px;
    }
  }
}

.conclusioncontent {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

  .titled1:not(:first-of-type) {
    margin-top: 30px;
  }
}

.totaltitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}


.blue-rectangle {
  width: 10px;
  height: 30px;
  background-color: #409eff;
  margin-right: 10px;
}
</style>
